<template>
	<view>
		<template v-for="item in listArr">
			<slot :item='item'></slot>
		</template>
		<m-loading  :pageIndex="pageIndex" :pageCount="pageCount" :loading="isLoading" />
	</view>
</template>

<script>
	export default {
		name: "m-list",
		data() {
			return {
				listArr: [],
				pageIndex: 1,
				pageCount: 1,
				pageSize: 10,
				isLoading: true,
			};
		},
		props: {
			//为true时  重置列表
			value: {
				type: Boolean,
				default: false,
			},
			datas: {
				type: Object,
				default: () => {}
			},
			params: {
				type: Object,
				default: () => {}
			},
			fn: {
				type: Function,
				default: null
			}
		},
		watch: {
			value(val) {
				if(val){
					this.reset()
				}
			}
		},
		mounted() {
			this.reset()
		},
		methods: {
			reset() {
				this.pageCount = 1;
				this.pageIndex = 1;
				this.getList();
			},
			async getList() {
				if(!this.fn){
					this.isLoading = false;
					return
				}
				if (this.pageIndex > this.pageCount) {
					return
				}
				this.isLoading = true;
				const params = {
					pageNum: this.pageIndex,
					pageSize: this.pageSize,
					...this.params,
				}
				//父级
				const data = await this.fn({
					params,
					data:this.datas
				})
				this.isLoading = false;
				const { list, pageCount } = data;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
				uni.stopPullDownRefresh();
				this.$emit('input',false)
			},
		}
	}
</script>

<style>

</style>